import React,{ useEffect, useState } from 'react'
import '../../Layout/Linte.css'
import SheC from '../../assets/new icon/摄氏度.png'
import { GET_TiAN } from '../../api/tian'
import Shid from '../../assets/new icon/湿度.png'
import Mometer from '../../assets/new icon/温度计.png'
import Feng from '../../assets/new icon/new feng.png'
import Yue from '../../assets/new icon/月亮.png'
import Sun from '../../assets/new icon/太阳.png'
import LinteCom from '../../component/childOne/LinteCom'
import OnerIght from '../../component/childOne/onerIght'
import Carousel from '../../component/Carousel'
import Fei from '../../assets/image/非机动车未带头盔识别系统_hov.png'
import shui from '../../assets/Oneimg/shui.png'
import dian from '../../assets/Oneimg/di.png'
import TwoRight from '../../component/childOne/TwoRight'
import gree from '../../assets/Oneimg/gree.png'
import swmin from '../../assets/Oneimg/swmin.png'

function Lntelligent() {
  const [quanList, setquanList] = useState([]);
  const [firstDayData, setfirstDayData] = useState([]);
   const images = [  
    Fei,  
    Fei,  
    Fei,   
  ];
useEffect(() => {  
  GET_TiAN().then((res) => {  
      
        //获取3天内的天气情况
        setquanList(res.data.daily[1]);

        console.log(quanList);
          
       // 使用firstDayData存储当天的天气情况
        setfirstDayData(res.data.daily[0]); 

        console.log(firstDayData);
              
      
    }).catch((error) => {  
      console.error('Error fetching weather data:', error);  
      // 在这里处理错误情况，例如设置状态以显示错误消息  
    });  
}, []);
  return (
    <div className='Lcontainer'>

      <div className='Lleft'>
        <div className='XLtop'>
          <b className='hh1'>&emsp;环境检测</b>
        </div>
        <div className='XLleft'>
          <div className='oneTop'>
             <img src={SheC} alt="" className='ssd'/>
           <span>&emsp;&emsp;&emsp;{firstDayData.tempMax}℃</span>
           &emsp;&emsp;<b className='hot'>高温黄色预警</b>
          </div>
        <div className='oneMain'>
          <div>
            <img src={Mometer} alt="" />
            <b>&emsp;体感 &emsp;&emsp;&emsp;{firstDayData.tempMax}℃</b>
          </div>
          <div>
             <img src={Feng} alt="" />
            <b>&emsp;风力&emsp;&emsp;&emsp;{firstDayData.windScaleDay}级</b>
          </div>
          <div>
             <img src={Shid} alt="" />
            <b>&emsp;湿度&emsp;&emsp;{firstDayData.humidity}%</b>
          </div>
        </div>

        <div className='twoMain'>
          <div className='twoChild'>
            <div className='xtwo'>
             &emsp; &emsp;<span>~&emsp;{firstDayData.tempMax}℃&emsp;</span><img src={Yue} alt="" />
            </div>
           <b> 今天 &emsp; &emsp;{firstDayData.textDay}</b>
          </div>
          <div className='twoChild1'>

          <div className='xtwo'>
             &emsp; &emsp;<span>~&emsp;{quanList.tempMax}℃&emsp;</span><img src={Sun} alt="" />
            </div>
           <b> 明天 &emsp; &emsp;{quanList.textDay}</b>

          </div>
        </div>

        </div>
        

         <div className='XLtop1'>
          <b className='hh1'>&emsp;学生分部分情况</b>
          
        </div>
        <div className='XLleft1'>
          <LinteCom></LinteCom>
        </div>

      </div>



      <div className='Lcenter'>
        <Carousel ></Carousel>  
      </div>






      <div className='Lright'>

        <div className='XRight1'>
          <div className='XRtop1'>
            &emsp;&emsp;水电用量
          </div>
        
         <div className='XLright1'>
          <div className='Rxtop'>
            <div>
              <img src={dian} alt="" />
              <div className='ciji'>
                <b>72670</b><br />
                <span>总用电量（度）</span>
              </div>
            </div>
            <div>

               <img src={shui} alt="" />
              <div className='ciji'>
                <b>6809</b><br />
                <span>总用水量（吨）</span>
              </div>
            </div>
          </div>
           <OnerIght></OnerIght>
        </div>

        </div>

        <div className='XRight2'>
          <div className='XRtop1'>
            &emsp;&emsp;校园人员流动情况
          </div>
        
         <div className='XLright2'>

          <div className='Rxtop2'>
               <div className='Rxtop'>
            <div>
              <img src={swmin} alt="" />
              <div className='ciji'>
                <b>6</b><br />
                <span>昨日外来访客</span>
              </div>
            </div>
            <div>

               <img src={gree} alt="" />
              <div className='ciji'>
                <b>13</b><br />
                <span>今日外来访客</span>
              </div>
            </div>
          </div>
          
          </div>
           
        <TwoRight></TwoRight>

        </div>

        </div>


      </div>

    </div>
  )
}

export default Lntelligent
